import Vue from 'vue'

const component = {
  template: `
    <div>
      <input type="text" v-model="propOne">
      this is {{text}}
      <span v-show="active">see me if active</span>
      123
      <span @click="handleChange">{{propOne}}</span>
    </div>`,
  props: {
    active: {
      type: Boolean,
      require: true,
      default: false
    },
    propOne: String,
    onChange: Function
  },
  data: function () {
    return {
      text: 123
    }
  },
  methods: {
    handleChange() {
      this.$emit('change')
    }
  }
}
// 组件名大写
Vue.component('CompOne', component)
// 使用的时候 -
new Vue({
  conponents: {
    CompOne: component
  },
  data: {
    prop1: 'text1'
  },
  methods: {
    handleChange () {
      this.prop1 += 1
    }
  },
  mounted() {
    console.log(this.$refs.com1)
  },
  el: '#root',
  template: `
  <div>
    <comp-one ref="com1" :active="true" :prop-one="prop1" @change="handleChange"></comp-one>
    <comp-one :active="false" prop-one="text2"></comp-one>
  </div>
  `
})
